<template>
    <div>
        <el-row>
            <el-col :span="24" style="text-align: left;">
                <el-form :inline="true" :model="queryGoodsLogForm" class="demo-form-inline">
                    <el-form-item label="仓库">
                        <el-select v-model="queryGoodsLogForm.warehouseId" placeholder="请选择" clearable>
                            <el-option
                            v-for="item in warehouses"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物资名称">
                        <el-input v-model="queryGoodsLogForm.goodsName" placeholder="请输入物资名称"></el-input>
                    </el-form-item>
                        
                    <el-form-item label="物资编号">
                        <el-input v-model="queryGoodsLogForm.goodsId" placeholder="请输入物资编号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="query">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="20" :offset="2">
                <el-table
                    ref="multipleTable"
                    height="600px"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    stripe
                    border
                    highlight-current-row
                    >
                    <!-- @selection-change="handleSelectionChange" -->
                    <!-- <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column> -->
                    <el-table-column
                    prop="logId"
                    label="日志编号"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsId"
                    label="物资编号"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsName"
                    label="物资名称"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsNum"
                    label="物资变动数量"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsChangeType"
                    label="变动情况"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsChangeTime"
                    label="变动时间"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="goodsChangeReason"
                    label="变动原因"
                    align="left"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="loggedEName"
                    label="操作人"
                    align="center"
                    >
                    </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20]"
                :page-size="100"
                layout=" prev, pager, next, total, sizes,jumper"
                :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
  
</template>

<script>
export default {
    name: 'GoodsLogManager',
    data(){
        return{
            tableData:[],
            total:0,
            queryGoodsLogForm: { 
                warehouseId:"",
                goodsName:'',
                goodsId:"",
                current:1,
                size:10
            },
            warehouses:[],
        }
    },
    methods:{
        getWarehouse(){
            this.$http.get("/lc/queryWarehouse").then(res => {
                this.warehouses = res.data;
            }).catch(err => {
              console.error("Error getting warehouses:", err);
              this.$message.error("获取仓库信息失败: " + err.message);
            })
        },
        query(){
            this.queryGoodsLogForm.current = 1;
            this.$http.post("/lc/getGoodsLogWithQueryGoodsLogDTO",this.queryGoodsLogForm).then(res => { 
                this.tableData = res.data.data
                this.total = res.data.total
                
            }).catch(err => {
              console.error("Error querying goods log:", err);
              this.$message.error("查询物资日志失败: " + err.message);
            })
        },
        // handleSelectionChange(val) {
        //     this.checkedData = val;
        // },
        handleSizeChange(val) {
            this.queryGoodsLogForm.size = val;
            this.$http.post("/lc/getGoodsLogWithQueryGoodsLogDTO",this.queryGoodsLogForm).then(res => { 
                this.tableData = res.data.data
                this.total = res.data.total
                
            }).catch(err => {
              console.error("Error querying goods log:", err);
              this.$message.error("查询物资日志失败: " + err.message);
            })
        },
        handleCurrentChange(val) {
            this.queryGoodsLogForm.current = val;
            this.$http.post("/lc/getGoodsLogWithQueryGoodsLogDTO",this.queryGoodsLogForm).then(res => { 
                this.tableData = res.data.data
                this.total = res.data.total
                
            }).catch(err => {
              console.error("Error querying goods log:", err);
              this.$message.error("查询物资日志失败: " + err.message);
            })
        },

    },
    mounted(){
        this.getWarehouse()
        this.query()
    },

}
</script>

<style>

</style>